<!DOCTYPE html>
<html  lang="zh-CN">
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" >
    <meta name="referrer" content="no-referrer" />
    <link rel="shortcut icon" href="./country.ico">
    <title><%= VUE_APP_TITLE %></title>
    <style>
        /* .static {
          width: 100%;
          height: 100%;
          background: url(./favicon.ico) no-repeat;
          background-size: 100% 100%;
          animation: bg-animation 3s infinite;
        }
        @keyframes bg-animation {
          from {
            opacity: .075;
          }
          40% {
            opacity: .82;
          }
          60% {
            opacity: .165;
          }
          100% {
            opacity: 1;
          }
        } */
        #loaderwrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999999;
            background: #000;
        }
        #loader {
            display: block;
            position: relative;
            left: 52%;
            top: 52%;
            width: 100px;
            height: 100px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -webkit-animation: spin 2s linear infinite;
            -ms-animation: spin 2s linear infinite;
            -moz-animation: spin 2s linear infinite;
            -o-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            z-index: 1001;
        }
        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -webkit-animation: spin 3s linear infinite;
            -moz-animation: spin 3s linear infinite;
            -o-animation: spin 3s linear infinite;
            -ms-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }
        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            -moz-animation: spin 1.5s linear infinite;
            -o-animation: spin 1.5s linear infinite;
            -ms-animation: spin 1.5s linear infinite;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        #loaderwrapper .load_title {
            font-family: 'Open Sans';
            color: #FFF;
            font-size: 19px;
            width: 100%;
            text-align: center;
            z-index: 9999999999999;
            position: absolute;
            top: 60%;
            opacity: 1;
            line-height: 30px;
        }
      </style>
      <script>
        startTime = Date.now();
      </script>
</head>
<body>
<noscript>
    <strong>
        请开启 JavaScript 功能来使用 <%= VUE_APP_TITLE %>。
    </strong>
</noscript>
<div id="loaderwrapper">
    <div id="loader"></div>
    <div class="load_title">正在加载资源，请耐心等候</div>
</div>
<!-- <div class="static" id="static"></div> -->
<div id="app"></div>
</body>
<script>
    window.onload = () => {
      startEnd = Date.now();
      firstPaint = startEnd - startTime;
      // console.log(firstPaint);
      removeDom();
    }
    function removeDom() {
      const div = document.querySelector('#loaderwrapper');
      document.querySelector('body').removeChild(div);
    }
  </script>
</html>
